<template>
	
	<div>
		<el-dialog
			v-model="visible"
			:title="title"
			destroy-on-close
			append-to-body
			width="550px"
			class="editor-dialog-c"
			draggable
			@closed="closed"
			:close-on-click-modal="false"
		>
		
			<el-form
			  ref="formRef"
			  :model="formData"
			  :rules="formRules"
			  label-width="100px"
			>
				<el-form-item label="字段名称" prop="name">
				  <el-input v-model="formData.name" id="name" placeholder="请输入名称" />
				</el-form-item>
				
				<el-form-item label="字段标识" prop="identifier">
				  <el-input v-model="formData.identifier" id="identifier" placeholder="请输入标识" />
				</el-form-item>
				
				<el-form-item label="数据类型" prop="dataType">
					<dictionary v-model="formData.dataType" type-code="thingmodel_data_type" style="width: 100%;" />
				</el-form-item>
				
				<el-form-item label="字段必填" prop="required">
				  <el-radio-group v-model="formData.required" id="required" >
				    <el-radio :value="true">是</el-radio>
				    <el-radio :value="false">否</el-radio>
				  </el-radio-group>
				</el-form-item>
				
				<el-form-item label="批量修改" prop="batchModify">
				  <el-radio-group v-model="formData.batchModify" id="batchModify" >
				    <el-radio :value="true">是</el-radio>
				    <el-radio :value="false">否</el-radio>
				  </el-radio-group>
				</el-form-item>
				<el-form-item label="字段显示" prop="display">
				  <el-radio-group v-model="formData.display" id="display">
				    <el-radio :value="true">是</el-radio>
				    <el-radio :value="false">否</el-radio>
				  </el-radio-group>
				</el-form-item>
				
				<el-form-item label="字段只读" prop="readonly">
				  <el-radio-group v-model="formData.readonly" id="readonly">
				    <el-radio :value="true">是</el-radio>
				    <el-radio :value="false">否</el-radio>
				  </el-radio-group>
				</el-form-item>
				
			<!-- 	<el-form-item label="字段为值" prop="isFieldValue">
				  <el-radio-group v-model="formData.isFieldValue" id="isFieldValue">
				    <el-radio :value="true">是</el-radio>
				    <el-radio :value="false">否</el-radio>
				  </el-radio-group>
				</el-form-item>
				
				<el-form-item label="数据库字段" prop="isDbField">
				  <el-radio-group v-model="formData.isDbField" id="isDbField">
				    <el-radio :value="true">是</el-radio>
				    <el-radio :value="false">否</el-radio>
				  </el-radio-group>
				</el-form-item>
				
				<el-form-item label="更新数据库字段" prop="isNotUpdateDbField"  v-if="formData.isDbField">
				  <el-radio-group v-model="formData.isNotUpdateDbField" id="isNotUpdateDbField">
				    <el-radio :value="true">是</el-radio>
				    <el-radio :value="false">否</el-radio>
				  </el-radio-group>
				</el-form-item>
				
				<el-form-item label="输出字段" prop="isOutField">
				  <el-radio-group v-model="formData.isOutField" id="isOutField">
				    <el-radio :value="true">是</el-radio>
				    <el-radio :value="false">否</el-radio>
				  </el-radio-group>
				</el-form-item>
				
				<el-form-item label="主键" prop="isPrimaryKey">
				  <el-radio-group v-model="formData.isPrimaryKey" id="isPrimaryKey">
				    <el-radio :value="true">是</el-radio>
				    <el-radio :value="false">否</el-radio>
				  </el-radio-group>
				</el-form-item>
				
				<el-form-item label="uuid" prop="isUuid" v-if="formData.isPrimaryKey">
				  <el-radio-group v-model="formData.isUuid" id="isUuid">
				    <el-radio :value="true">是</el-radio>
				    <el-radio :value="false">否</el-radio>
				  </el-radio-group>
				</el-form-item> -->
				
				<!--数据来源-->
<!-- 				<el-form-item label="数据来源" prop="source" >
				  <el-radio-group v-model="formData.source" id="source">
				    <el-radio :value="true">DB</el-radio>
				    <el-radio :value="false">默认</el-radio>
				  </el-radio-group>
				</el-form-item>
				
				<el-form-item label="数据库表" prop="tableName"  v-if="formData.isPrimaryKey">
				  <el-input v-model="formData.tableName" id="tableName" placeholder="请输入数据库表" />
				</el-form-item>
				
				<el-form-item label="映射字段" prop="fieldMapping">
				  <el-input v-model="formData.fieldMapping" id="fieldMapping" placeholder="请输入映射字段" />
				</el-form-item>
				
				<el-form-item label="来源标识符" prop="sourceId"  v-if="formData.source">
				  <el-input v-model="formData.sourceId" id="sourceId" placeholder="请输入来源标识符" />
				</el-form-item> -->
				
				<el-form-item v-if="formData.dataType=='int' || formData.dataType=='float' || formData.dataType=='double' || formData.dataType=='long' " label="取值范围" prop="numberFiled">
				  <el-col :span="11">
					<el-input-number v-model="numberFiled.min" controls-position="right"/>
				  </el-col>
				  <el-col class="line" :span="2" style="text-align: center;">-</el-col>
				  <el-col :span="11">
					<el-input-number v-model="numberFiled.max" controls-position="right"/>
				  </el-col>
				</el-form-item>
		
				<el-form-item v-if="formData.dataType=='int' || formData.dataType=='float' || formData.dataType=='double' || formData.dataType=='long' " label="步长" prop="numberFiledStep">
					<el-input-number v-model="numberFiled.step" controls-position="right" id="numberFiledStep"/>
				</el-form-item>
				
				<!---默认值设置-->
				<el-form-item  v-if="formData.dataType!='array' && formData.dataType!='struct' && formData.dataType!='img' && formData.dataType!='model'  && formData.dataType!='color' " label="默认值" prop="defaultValue">
				  <el-input v-model="formData.defaultValue" placeholder="请输入默认值"  id="defaultValue" />
				</el-form-item>
				
				<!---图片库-->
<!-- 					<ImgField v-if="formData.dataType=='img' " :identifier="imgField.identifier" :label="imgField.name" :value="imgField.value" :required="imgField.required"  @onchange="onchangeForDefault"  />
					<ModelPane v-if="formData.dataType=='model' " :identifier="modelField.identifier" :label="modelField.name" :value="modelField.value" :required="modelField.required"  @onchange="onchangeForDefault"  />
				 -->
				 
				 <ColorField v-if="formData.dataType=='color' " size="default" :pidentifier="colorField.pidentifier"  :identifier="colorField.identifier" :label="colorField.name" :value="colorField.value" :required="colorField.required" @onchange="onchangeForDefault"></ColorField>
				 
				 
				<!---默认值设置-->
				<el-form-item v-if="formData.dataType=='enum' " label="枚举项" prop="enum">
				  <el-row :gutter="24">
					<el-col :span="11">
					  参数值
					  <el-tooltip class="item" effect="dark" content="支持整型，取值范围：-2147483648 ~ 2147483647" placement="top-start">
						<i class="el-icon-question" />
					  </el-tooltip>
					</el-col>
					<el-col :span="11" :offset="1">
					  参数描述
					  <el-tooltip
						class="item"
						effect="dark"
						content="支持中文、英文大小写、日文、数字、下划线和短划线，必须以中文、英文或数字开头，不超过20个字符"
						placement="top-start"
					  >
						<i class="el-icon-question" />
					  </el-tooltip>
					</el-col>
				  </el-row>
					
				  <el-row v-for="(item, index) in enumFiled.items" :key="index" :gutter="24" style="margin-bottom: 4px;">
					<el-col :span="9">
					  <el-form-item>
						<el-input v-model="item.value" />
					  </el-form-item>
					</el-col>
					<el-col :span="2">
					  --
					</el-col>
					<el-col :span="9">
					  <el-form-item>
						<el-input v-model="item.label" />
					  </el-form-item>
					</el-col>
					<el-col :span="4">
					  <el-button link @click="removeEnumItem(index)">删除 </el-button>
					</el-col>
				  </el-row>
				  <el-row>
					<i class="el-icon-plus" style="color: #1890FF" />
					<el-button link @click="addEnumItem">添加枚举项</el-button>
				  </el-row>
				</el-form-item>
				
				<el-form-item v-if="formData.dataType=='boolean' " label="布尔值" prop="booleanFiled">
				  <el-row :gutter="24" style="margin-bottom: 4px;">
					<el-col :span="3" :offset="1" style="font-weight: 600;">
					  0-
					</el-col>
					<el-col :span="20">
					  <el-form-item>
						<el-input v-model="booleanFiled.isFalse" placeholder="如：关" />
					  </el-form-item>
					</el-col>
				  </el-row>
				  <el-row :gutter="24">
					<el-col :span="3" :offset="1" style="font-weight: 600;">
					  1-
					</el-col>
					<el-col :span="20">
					  <el-form-item>
						<el-input v-model="booleanFiled.isTrue" placeholder="如：开" />
					  </el-form-item>
					</el-col>
				  </el-row>
				</el-form-item>
				
				<el-form-item v-if="formData.dataType=='string' " label="数据长度" prop="textFiledLength">
				  <el-input v-model="textFiled.length" id="textFiledLength"  placeholder="请输入数据长度" oninput="value=value.replace(/[^\d]/g,'')" >
					<template  #append>字节</template>
				  </el-input>
				</el-form-item>
				
				<el-form-item v-if="formData.dataType=='date' " label="时间格式" prop="dateFiled">
				  <el-input v-model="dateFiled.type" id="dateFiled" placeholder="String 类型的UTC时间戳(毫秒)" disabled />
				</el-form-item>
				
				<el-form-item v-if="formData.dataType=='array' " label="元素类型">
				  <el-radio-group v-model="arrayFiled.type" style="margin-left: 4px;" @change="arrayTypeChange">
					<el-radio label="int">int</el-radio>
					<el-radio label="float">float</el-radio>
					<el-radio label="double">double</el-radio>
					<el-radio label="text">text</el-radio>
					<el-radio label="struct">struct</el-radio>
				  </el-radio-group>
				</el-form-item>
				
				<el-form-item v-if="formData.dataType=='array' " label="元素个数">
				  <el-input v-model="arrayFiled.count" />
				</el-form-item>
				
				<el-form-item v-if="formData.dataType=='struct' || (formData.dataType=='array' && isArrayStruct) " :label="formData.source?'参数字段':'JSON 对象'" prop="jsonObj">
					<div  v-for="(item, index) in json" :key="index" class="json-item">
						<div class="title">
							{{ item.name+" - "+item.identifier }}
						</div>
						<div class="opear">
							<el-button type="primary" :icon="Edit" link @click="editJson(item,index)"/>
							<el-button type="warning" :icon="DocumentCopy" link @click="copyJson(item,index)" />
							<el-button type="info" :icon="SortDown" link @click="downJson(item,index)"/>
							<el-button type="info" :icon="SortUp" link @click="upJson(item,index)"/>
							<el-button type="danger" :icon="Delete" link @click="deleteJson(index)"/>
						</div>
					</div>
					<div>
						<el-button type="success" :icon="Plus" link @click="addParameter">增加参数</el-button>
					</div>
				</el-form-item>	
			</el-form>
			<template #footer>
			  <div class="dialog-footer">
				<el-button color="#626aef" @click="submitForm"  :loading="loading" v-hasPerm="['ue:thingmodel:saveFun']">确 定</el-button>
				<el-button color="#1e1e1e" @click="closed"  :loading="loading">取 消</el-button>
			  </div>
			</template>
		</el-dialog>
		
		    <FieldPane
		      v-if="parameterPane.visible"
			  :visible="parameterPane.visible" 
		      :properties="parameterPane"
		      @backParameter="receiveParameter"
		      @closed="closedParameter"
		    />
	</div>
</template>
<script lang="ts" setup>
	import { Plus,Delete, Edit, SortUp, SortDown, DocumentCopy } from '@element-plus/icons-vue'
	import FieldPane from './FieldPane.vue'
	
	// 
	 import ImgField from "@/components/FormField/ImgField.vue"
	 import ColorField from "@/components/FormField/ColorField.vue"
	// import ModelPane from "@/components/FormItems/ModelPane.vue"
	
	import type {FormRules } from 'element-plus'
	const formRef=ref();
	const emits = defineEmits(['closed','backParameter'])
	const loading=ref(false)
	const props=defineProps({
		properties:Object
	})
	
	const parameterPane= ref<any>({
		visible: false,
		title: '添加字段',
		data: {}
	});
	
	const visible=ref(false)
	const itemIdex=ref()
	const visibleStructAndArray=ref(false)
	const isDisabled=ref(false)
	const title=ref("")
	
	const formData=ref<any>({
		identifier: "",
		name: "",
		required: false,
		batchModify: true,
		readonly: false,
		isFieldValue: false,
		isDbField: true,
		isNotUpdateDbField:true,
		isOutField: true,
		isPrimaryKey:false,
		tableName:"",
		sourceId:"",
		source:false,
		isUuid:false,
		fieldMapping:"",
		display: true,
		dataType:"",
		defaultValue:undefined,
	})
	
	const isArrayStruct=ref(false)     
	const currentParameter=ref<any>();
	const numberFiled=ref<any> ({
		min: -2147483648,
		max: 2147483648,
		step: 1,
		unit: ''
	})
	
	const enumFiled= ref<any>({
	    items: []
	})
	
	const booleanFiled= ref<any>( {
		isTrue: '',
		isFalse:''
	})
	
	const textFiled= ref<any>( {
		length: 1024
	});
	const  dateFiled= ref<any>( {
		type: ''
	})
	const  arrayFiled= ref<any>( {
		type: 'int',
		count: 10
	})
    const json= ref<any>([]);
	
	const imgField=ref<any>({
		identifier:"defaultImg",
		name:"默认图片",
		value:"",
		required:true
	});
	
	
	const colorField=ref<any>({
		identifier:"defaultColor",
		name:"默认颜色",
		value:"",
		required:true
	});
	
	const modelField=ref<any>({
		identifier:"defaultModel",
		name:"默认模型",
		value:"",
		required:true
	});
	
	const formRules=ref<FormRules>({
	  name: [{ required: true, message: "参数必填", trigger: "blur" }],
	  identifier: [{ required: true, message: "参数必填", trigger: "blur" }],
	  dataType: [{ required: true, message: "参数必填", trigger: "blur" }],
	  required: [{ required: true, message: "参数必填", trigger: "blur" }],
	  batchModify: [{ required: true, message: "参数必填", trigger: "blur" }],
	  readonly: [{ required: true, message: "参数必填", trigger: "blur" }],
	  isFieldValue: [{ required: true, message: "参数必填", trigger: "blur" }],
	  isDbField: [{ required: true, message: "参数必填", trigger: "blur" }],
	  isNotUpdateDbField: [{ required: true, message: "参数必填", trigger: "blur" }],
	  isOutField: [{ required: true, message: "参数必填", trigger: "blur" }],
	  isPrimaryKey: [{ required: true, message: "参数必填", trigger: "blur" }],
	  display: [{ required: true, message: "参数必填", trigger: "blur" }],
	  source: [{ required: true, message: "参数必填", trigger: "blur" }],
	});
	
	watch(
　　      () => (props.properties),
　　      (value) => {
			visible.value = value!.visible
	        itemIdex.value = value!.index
	        visibleStructAndArray.value = value!.isShowStructAndArray
	        if (value!.data) {
	          isDisabled.value = true
	          title.value = '编辑参数'
	          const filed = value!.data
			  if(filed){
				  formData.value.name = filed.name
				  formData.value.identifier = filed.identifier
				  formData.value.fieldMapping = filed.fieldMapping
				  formData.value.required = filed.required
				  formData.value.batchModify = filed.batchModify
				  formData.value.readonly = filed.readonly
				  formData.value.isFieldValue = filed.isFieldValue
				  formData.value.isDbField = filed.isDbField
				  formData.value.isNotUpdateDbField = filed.isNotUpdateDbField
				  formData.value.isOutField = filed.isOutField
				  formData.value.isPrimaryKey = filed.isPrimaryKey
				  formData.value.isUuid = filed.isUuid
				  formData.value.tableName = filed.tableName
				  formData.value.source = filed.source
				  formData.value.sourceId = filed.sourceId
				  formData.value.display = filed.display
				  formData.value.defaultValue = filed.defaultValue
				  formData.value.dataType = filed.dataType?.type
				  
				  if (formData.value.dataType === 'int' || formData.value.dataType === 'float' || formData.value.dataType === 'double') {
				    numberFiled.value = filed.dataType?.specs
				  }
				  if (formData.value.dataType === 'enum') {
					enumFiled.value = filed.dataType?.specs
				  }
				  if (formData.value.dataType === 'boolean') {
					booleanFiled.value = filed.dataType?.specs
				  }
				  if (formData.value.dataType === 'string') {
					textFiled.value = filed.dataType?.specs
				  }
				  if (formData.value.dataType === 'date') {
					dateFiled.value = filed.dataType?.specs
				  }
				  if (formData.value.dataType === 'struct') {
					json.value = filed.dataType?.specs|| []
				  }
				  if (formData.value.dataType === 'array') {
				    arrayFiled.value = filed.dataType?.specs || { type: 'int', count: 10 }
					arrayFiled.value.count=filed.dataType?.count;
					
				    if (filed.dataType?.specs.type === 'struct') {
				      json.value = filed.dataType?.specs.items || []
				      isArrayStruct.value = true
				    }
				  }
				  
				  if (formData.value.dataType === 'img') {
						imgField.value.value= filed.defaultValue
				  }
				  
				  if (formData.value.dataType === 'color') {
						colorField.value.value= filed.defaultValue
				  }
				  
				  if (formData.value.dataType === 'model') {
				  		modelField.value.value= filed.defaultValue
				  }
				  
				  if (formData.value.color === 'v2') {
				  	//filed.dataType.specs= {}
					imgField.value.value= filed.defaultValue
				  }
				  if (formData.value.dataType === 'v2') {
				  	//filed.dataType.specs= {}
				  }
				  
				  if (formData.value.dataType === 'v3') {
				  	//filed.dataType.specs= {}
				  }
				  
				  if (formData.value.dataType === 'v4') {
				  	//filed.dataType.specs= {}
				  }
				  
			  }
	        } else {
	          isDisabled.value = false
	          title.value = '添加参数'
	        }
　　      },
		{ immediate: true, deep: true },
　　  )
	
	const onchange=(val:any)=>{
		// if(val=='int' || val=='float' || val=='double'){
		// 	formRules.value['numberFiled']= [{ required: true, message: "参数必填", trigger: "blur" }];
		// 	formRules.value['numberFiledStep']= [{ required: true, message: "参数必填", trigger: "blur" }];
		// }else{
		// 	delete formRules.value['numberFiled']; 
		// 	delete formRules.value['numberFiledStep']; 
		// }
	}
	
	// const onInput=(value:any)=>{
	// 	if (formData.value.dataType === 'int' || formData.value.dataType === 'float' || formData.value.dataType === 'double') {
	// 		formData.value.defaultValue=value.replace(/[^\d]/g,'')
	// 	}
	// }
	
	const onchangeForDefault=(input:{pidentifier:string,identifier:string,value:any})=>{
		
		if(imgField.value.identifier==input.identifier){
			imgField.value.value=input.value
		}
		
		if(colorField.value.identifier==input.identifier){
			colorField.value.value=input.value
		}
		if(modelField.value.identifier==input.identifier){
			modelField.value.value=input.value
		}
	}
	
	 /* 添加枚举项 */
	const addEnumItem=()=> {
	    const item = {
	        value: '',
	        desc: ''
	    }
	    enumFiled.value.items.push(item)
	}
	/* 删除枚举项 */
	const removeEnumItem=(index:any)=> { 
	    enumFiled.value.items.splice(index, 1)
	}
	
	const arrayTypeChange=(value:any)=> {
	  if (value === 'struct') {
		isArrayStruct.value = true
	  } else {
		isArrayStruct.value = false
	  }
	}
	const addParameter=()=>  {
	  addExtendParameter('0')
	}
	const addExtendParameter=(current:any)=>  {
		currentParameter.value = current
		parameterPane.value.visible = true
		parameterPane.value.data =undefined
		
		if (currentParameter.value === '0') {
			parameterPane.value.isShowStructAndArray = false
		} else if (currentParameter.value === '1') {
			parameterPane.value.isShowStructAndArray = true
		} else if (currentParameter.value === '2') {
			parameterPane.value.isShowStructAndArray = true
		}
	}
	
    const closedParameter=()=> {
      parameterPane.value.visible = false
      parameterPane.value.data =undefined
      parameterPane.value.index = undefined
      parameterPane.value.value = undefined
    }
    const receiveParameter=(parameter:any, itemIdex:any)=> {
      if (itemIdex || typeof itemIdex === 'number') {
        json.value[itemIdex] = parameter
      } else {
        json.value.push(parameter)
      }
      parameterPane.isShowStructAndArray = undefined
    }	
    const editJson=(item:any, index:any)=> {
      currentParameter.value = '0'
      parameterPane.value.visible = true
      parameterPane.value.data = item
      parameterPane.value.index = index
    }
	
	const copyJson=(item:any,index:any)=>{
		let newItem=JSON.parse(JSON.stringify(item))
		newItem.name=newItem.name+"_copy"
		newItem.identifier=newItem.identifier+"_copy"
		json.value.splice(index+1,0,newItem);
	}
	
	const upJson=(item:any,index:any)=>{
		json.value.splice(index, 1)
		json.value.splice(index-1,0,item);
	}
	
	const downJson=(item:any,index:any)=>{
		json.value.splice(index, 1)
		json.value.splice(index+1,0,item);
	}
	
    const deleteJson=(index:any)=> {
      json.value.splice(index, 1)
    }
	const submitForm=()=>{
		loading.value = true
		const filed:any = {}
		const dataType:any = {
			type:"",
			specs:{},
		}
		filed.dataType=dataType;
		filed.name = formData.value.name
		filed.identifier = formData.value.identifier
		filed.fieldMapping = formData.value.fieldMapping
		filed.required = formData.value.required
		filed.batchModify = formData.value.batchModify
		filed.readonly = formData.value.readonly
		filed.isFieldValue = formData.value.isFieldValue
		filed.isDbField = formData.value.isDbField
		filed.isNotUpdateDbField = formData.value.isNotUpdateDbField
		filed.isOutField = formData.value.isOutField
		filed.isPrimaryKey = formData.value.isPrimaryKey
		filed.tableName = formData.value.tableName
		filed.sourceId = formData.value.sourceId
		filed.source = formData.value.source
		filed.isUuid = formData.value.isUuid
		filed.display = formData.value.display
		filed.defaultValue = formData.value.defaultValue
		filed.dataType.type = formData.value.dataType
		
		if (formData.value.dataType === 'int' || formData.value.dataType === 'float' || formData.value.dataType === 'double') {
			filed.dataType.specs= numberFiled.value
		}
		if (formData.value.dataType === 'enum') {
			filed.dataType.specs= enumFiled.value
		}

		if (formData.value.dataType === 'boolean') {
			filed.dataType.specs= booleanFiled.value
		}

		if (formData.value.dataType === 'string') {
			filed.dataType.specs= {
				length:parseInt(textFiled.value.length)
			}
		}
		if (formData.value.dataType === 'date') {
			filed.dataType.specs= dateFiled.value
		}

		if (formData.value.dataType === 'struct') {
			filed.dataType.specs= json.value
		}

		if (formData.value.dataType === 'array') {
			filed.dataType.specs= arrayFiled.value
			if (filed.dataType.specs.type === 'struct') {
				filed.dataType.specs.items = json.value
			}
		}
		
		if (formData.value.dataType === 'img') {
			filed.dataType.specs= {}
			filed.defaultValue = imgField.value.value
		}
		
		if (formData.value.dataType === 'model') {
			filed.dataType.specs= {}
			filed.defaultValue=modelField.value.value
		}
		
		if (formData.value.dataType === 'color') {
			console.log(colorField.value.value)
			filed.defaultValue=colorField.value.value
		}
		
		if (formData.value.dataType === 'v2') {
			filed.dataType.specs= {}
		}
		
		if (formData.value.dataType === 'v3') {
			filed.dataType.specs= {}
		}
		
		if (formData.value.dataType === 'v4') {
			filed.dataType.specs= {}
		}
		
		formRef.value.validate((isValid: boolean) => {
		  if (isValid) {
			  backParameter(filed)
			  loading.value = false
			  closed();
		  }else{
			  loading.value = false
		  }
		});
	}
	const backParameter=(dataSpecs:any)=> {
		 emits('backParameter',dataSpecs ,itemIdex.value)
	}
	const closed=()=> {
		visible.value=false;
	    emits('closed', false)
	};
	defineExpose({
	});
</script>

<style scoped>
	:deep(.el-form-item__content){
		display: flex;
		align-items: flex-start;
		flex-direction: row;
		align-items: flex-start;
	}
	:deep(.el-row){
		width: 100%;
		margin-top: 2px;
		margin-left: 0px !important; 
		margin-right: 0px !important; 
		margin-bottom: 0px;
	}
	
	.json-item{
		display: flex;
		flex-direction: row;
		background-color: #2a2d3e17;
		width: 100%;
		margin-bottom: 2px;
		padding-left: 5px;
		color: #606266;
		padding-right: 5px;
		border-radius: 4px;
		>.title{
			flex: 1;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		>.opear{
			width: 150px;
		}
	}
	
	:deep(.is-guttered){
		display: flex;
		align-content: center;
		flex-direction: row;
		align-items: center;
		height: 32px;
	}
	
	:deep(.el-radio__input.is-checked .el-radio__inner){
		border-color: #626aef;
		background: #626aef;
	}
	:deep(.el-radio__input.is-checked+.el-radio__label){
		color:#626aef;
	}
</style>